<template>
  <div class="stock-box">
    <div class="header">
      <van-nav-bar title="管理收货单" left-text="返回" left-arrow @click-left="onClickLeft"
        @click-right="onClickRight">
        <template #right>
        <van-icon name="plus" size="20" color="#fff"/>
      </template>
        </van-nav-bar>
    </div>
    <main>
      <div class="mian-header">
        <input v-model="projectName" type="text" placeholder="输入项目名字">
        <van-dropdown-menu class="search-box">
          <van-dropdown-item v-model="state" :options="states" />
        </van-dropdown-menu>
        <i @click="search">&#xe622;</i>
      </div>
      <div class="main">
        <ul @scroll="scrollEvt">
          <van-swipe-cell v-for="it in list" :key="it.id">
            <li >
            <span class="t">{{  it.projectName  }} <em>{{  it.state  }}</em></span>
            <span>创建人：{{  it.userName  }}</span>
            <span>创建日期：{{  it.createTime  }}</span>
            <span>创建材料：{{  it.materialName  }}</span>
          </li>
            <van-cell  />
            <template #right>
              <van-button @click="deleteEvt(it)" v-if="it.state === '新建'" style="height: 100%;" square type="danger" text="删除" />
              <van-button @click="editEvt(it)" v-if="it.state === '新建'" style="height: 100%;" square type="primary" text="编辑" />
              <van-button v-if="it.state === '完成'" style="height: 100%;" square type="primary" text="收款"/>
            </template>
          </van-swipe-cell>
          <li>
            <div v-if="loading">
              <van-loading type="spinner" color="#10239e">正在加载中</van-loading>
            </div>
            <div v-else-if="hasMore" class="loading">加载更多数据</div>
            <div v-else>没有更多数据</div>
          </li>
        </ul>
      </div>
    </main>
    
  </div>
</template>

<script>
import { receivingDeleteApi, recevingListApi } from '@/api/homeApi';

export default {
  data() {
    return {
      state: '',
      projectName: '',
      states: [
        { text: '全部', value: '' },
        { text: '完成', value: '已完成' },
        { text: '作废', value: '作废' }
      ],
      list: [],
      loading: true,
      // 当前加载第几页的数据
      page: 1,
      // 是否有更多数据
      hasMore: true,
    }
  },
  created() {
    this.getList()
  },
 
  methods: {
    search(){
      this.page = 1
      this.list = []
      this. getList()
    },
    async getList() {
      let result = await recevingListApi({
        projectName: this.projectName,
        state: this.state,
        page: this.page,
        size: 8
      })
      if (result.code === 200) {
        this.list = this.page === 1 ? result.data.rows : this.list.concat(result.data.rows)
        this.hasMore = this.page * 8 < result.data.total
      }  
      setTimeout(()=>{
        this.loading = false
      })
    },
    scrollEvt(evt) {
      if (this.loading) return
      if (!this.hasMore) return
      let isBottom = evt.target.scrollHeight - evt.target.clientHeight - evt.target.scrollTop < 32
      if (isBottom) {
        // 修改加载状态
        this.loading = true
        // 要去加载下一页数据
        this.page += 1
        // 再去调用获取数据的方法
        this.getList()
      }
    },
    //删除订单
    deleteEvt(row) {
                this.$dialog.confirm({
                        title: '删除确认',
                        message: '确定要删除此条订单'
                    })
                    .then(async () => {
                        let result = await receivingDeleteApi(row.id)
                        if (result.code === 200) {
                            this.$toast.success('删除成功')
                        } else {
                            this.$toast.fail('删除失败，请重试')
                        }
                    })
                    .catch(() => {});
            },
      //编辑订单
      editEvt(row){
          this.$router.push({path: 'recevie/edit', query: {type: 'edit', id: row.id}})
      },

    onClickLeft() {
      this.$router.push('/main')
    },

    onClickRight() {
      this.$router.push('/recevie/edit')
    },
  },
};
</script>


<style lang="less" scoped>
@import '@/style/common.less';
.stock-box{
  height: 100%; 
}
main{
  height: 100%;
}
.van-hairline--bottom {
  background-color: #6199ff;
}

.header/deep/ .van-nav-bar__arrow,
.header/deep/ .van-nav-bar__text,
.header/deep/ .van-nav-bar__title {
  color: #F2F2F2 !important;
  font-size: 20px;
}

.mian-header {
  display: flex;
  height: 28px;
  padding: 10px 0;
  border-bottom: solid 1px @c8;

  >input {
    flex: 1;
    width: 0;
    height: 28px;
    border: none;
    outline: none;
    background: transparent;
    font-size: .75rem;
    padding: 0 12px;

    &::-webkit-input-placeholder {
      font-size: .65rem;
    }
  }

  >i {
    flex: 0 0 48px;
    width: 0;
    height: 28px;
    .lebei-ft();
    text-align: center;
    line-height: 28px;
  }
}

.main {
  display: block;
  height: calc(100% - 120px);

  >ul {
    list-style: none;
    display: block;
    height: 100%;
    overflow-x: hidden;
.van-cell {
  padding: 0;
}
    li {
      display: block;
      border-bottom: 1px solid @c1;
      padding: 10px 10px;
      &:last-child {
        border-bottom: none;
      }

      >span {
        display: block;
        line-height: 24px;
        font-size: .65rem;
        color: rgb(137, 135, 135);

        &.t {
          color: rgb(35, 34, 34);
          font-size: 18px;
          line-height: 24px;
        }

        >em {
          display: inline-block;
          text-align: center;

          letter-spacing: 2px;
          width: 40px;
          height: 22px;
          background-color: #6199ff;
          color: @c10;
          font-size: .6rem;
          margin-left: 6px;
          font-style: normal;
        }
      }
    }
  }
}
</style>